import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image,Checkbox } from '@tarojs/components'
import { AtSearchBar, AtCheckbox, AtButton, AtSegmentedControl, AtDrawer, AtTag } from 'taro-ui'
import './xuanzeshouxinren.scss'
import reactMixin from 'react-mixin'
import myJs from './xuanzeshouxinrenJs.js'
import app from '../../../../main.js'

export default class Xuanzeshouxinren extends Component {
    config = {
        navigationBarTitleText: '选择收信人'
    }
    constructor() {
        super(...arguments);
        this.state = this.getData();
    }
    init() {
        let province_select=[];
        for(let i=0;i<34;i++){
            province_select.push(false);
        }
        this.setState({
            checkedList:[],
            checkedList2:[],
            search:'',
            current:8,
            show:false,
            show2:false,
            province_id:'',
            province_select:province_select,
            city_select:[],
        });
        this.allLabel();
        this.allProvince();
    }
    //全选收信人
    checkAll(){
        let flag=true,
            idArr=[];
        for(let val of this.state.patients.items){
           let id= val.id;
           idArr.push(id);
           if(this.state.checkedList.indexOf(id)===-1){
              flag=false;
           }
        }
        flag
        ? this.setState({
            checkedList:[]
        })
        : this.setState({
            checkedList:idArr
        });     
    }
    //处理省份选择和标签选择的弹出
    handleChange2(name,v){
        var names = name.split('.');
        var n = names[0];
        var temp = this.state;
        for(var i = 0; i < names.length - 1; i++) {
            temp = temp[names[i]];
        }
        temp[names[i]] = v;
        this.setState({
            n: temp[names[i]]
        },()=>{
            if(this.state.current===0){
                this.setState({
                    show:false,
                    show2:true,
                })
            }else if(this.state.current===1){
                this.setState({
                    show2:false,
                    show:true,
                })
            }
        });
    }
    //调用获取城市的方法
    getCities(e){
        this.setState({
            province_id:e.target.dataset.index
        },()=>{
            this.allCitie();
        });        
    }
    //获取城市前的处理方法
    beforeAllCitie(data){
        data.province_id=this.state.province_id;
        return true;
    }
    // //获取城市后的处理方法
    // afterAllCitie(){
    //     let city_select=[];
    //     for(let key in this.state.cities.items){
    //         city_select.push(false);
            
    //     }
    //     this.setState({
    //         cities:this.state.cities,
    //         city_select:city_select,
    //     })
    // }
    //改变省份标签颜色
    selectedProvince(status,e){
        let province_select=[];
        for(let i=0;i<34;i++){
            province_select.push(false);
        }
        this.setState({
            province_select:province_select
        },()=>{
            if(!status.active){
                this.state.province_select[e.target.dataset.index-1]=true;
                this.setState({
                    province_select:this.state.province_select
                })
            } 
        })
                
    }
   //改变城市标签颜色
   selectedCity(status,e){
    let city_select=[];
    for(let key in this.state.cities.items){
        city_select.push(false);
    }
    console.log(e.target.dataset.index);
    this.setState({
        city_select:city_select,
    },()=>{
        if(!status.active){
            this.state.city_select[e.target.dataset.index]=true;
            this.setState({
                city_select:this.state.city_select
            })
        }
    })
    
}
    //获取标签前处理方法
    beforeAllLabel(data){
        data.doctor_id=app.current.id;
        return true;
    }
    //获取标签后的处理方法
    afterAllLabel(){
        let items=[];     
        for(let key of this.state.labels.items){
            if(key.type==='患者'){
                items.push(key);
            }
        }  
        this.state.labels.items=items; 
        this.setState({
            labels:this.state.labels
        })
    }


    next=()=>{
        let ids='',
            names='';
            // console.log(this.state.checkedList);
            // console.log(this.state.checkedList.length===0);
        if(this.state.checkedList.length===0){
            app.alertTab('请至少选择一个收信人');
            return null;
        }else{
            for(let idVal of this.state.checkedList){
                    ids+=(idVal+',');        
                for(let nameVal of this.state.patients.items){
                        if(nameVal.id===idVal){
                            names+=(nameVal.members_id_from_doctor_id_name+',');
                        }
                }
            }
            ids=ids.substr(0,ids.length-1);
            names=names.substr(0,names.length-1);
            this.navigateTo('../qunfaxiaoxifasong/qunfaxiaoxifasong?names='+names+'&ids='+ids+'&count='+this.state.checkedList.length);
        }
        
    }

    render() {
        return (
            <View className='xuanzeshouxinren'>
                <View className=' class_0'>
                    <AtSearchBar
                        value={this.state.search}
                        onChange={this.handleChange.bind(this, 'search')}
                    >
                    </AtSearchBar>
                </View>
                <AtSegmentedControl
                    className='choose'
                    values={['地区筛选', '标签筛选']}
                    onClick={this.handleChange2.bind(this, 'current')}
                    current={this.state.current}
                    selectedColor='#72d021'
                    color='#fff'
                    fontSize='32'
                />
                <AtDrawer
                    show={this.state.show}
                    onClose={this.handleChange.bind(this, 'show', !this.state.show)}
                    mask
                    right
                >
                    <AtCheckbox
                        options={
                            this.state.labels.items.map(item => {
                                return {
                                    value: item.id,
                                    label: item.name
                                }
                            })
                        }
                        selectedList={this.state.checkedList2}
                        onChange={this.handleChange.bind(this, 'checkedList2')}
                    />
                </AtDrawer>
                <AtDrawer
                    show={this.state.show2}
                    onClose={this.handleChange.bind(this, 'show2', !this.state.show2)}
                    mask
                    right
                >
                    <View className='address-box'>
                        <View className='title'>省份</View>
                        <View className='content at-row at-row--wrap'>
                            {
                                this.state.provinces.items.map((item,index)=>{
                                    return (
                                        <View 
                                         className='at-col at-col-4' 
                                         key={index} 
                                         onClick={this.getCities.bind(this)}>
                                            <AtTag 
                                            data-index={item.id} 
                                            onClick={this.selectedProvince.bind(this)}
                                            active={this.state.province_select[item.id-1]}
                                            >{item.name}
                                            </AtTag>
                                        </View>
                                    )
                                })
                            }
                        </View>
                        <View className='title'>城市</View>
                        <View className='content at-row at-row--wrap'>
                            {
                                this.state.cities.items.map((item,index)=>{
                                    return (
                                        item.id===''
                                            ?<View className='at-col at-col-4' key={index}>
                                                <AtTag>请选择省份</AtTag>
                                            </View>
                                            :<View className='at-col at-col-4'>
                                                <AtTag 
                                                 data-index={index} 
                                                 onClick={this.selectedCity.bind(this)}
                                                 active={this.state.city_select[index]}
                                                 >{item.name}
                                                </AtTag>
                                            </View>
                                    )
                                })
                            }
                        </View>
                    </View>
                </AtDrawer>
                <View className='list'>
                    <View className='alphabet'>
                        <Text className='text'>#</Text>
                        <Text className='text'>A</Text>
                        <Text className='text'>B</Text>
                        <Text className='text'>C</Text>
                        <Text className='text'>D</Text>
                        <Text className='text'>E</Text>
                        <Text className='text'>F</Text>
                        <Text className='text'>G</Text>
                        <Text className='text'>H</Text>
                        <Text className='text'>I</Text>
                        <Text className='text'>J</Text>
                        <Text className='text'>K</Text>
                        <Text className='text'>L</Text>
                        <Text className='text'>M</Text>
                        <Text className='text'>N</Text>
                        <Text className='text'>O</Text>
                        <Text className='text'>P</Text>
                        <Text className='text'>Q</Text>
                        <Text className='text'>R</Text>
                        <Text className='text'>S</Text>
                        <Text className='text'>T</Text>
                        <Text className='text'>U</Text>
                        <Text className='text'>V</Text>
                        <Text className='text'>W</Text>
                        <Text className='text'>X</Text>
                        <Text className='text'>Y</Text>
                        <Text className='text'>Z</Text>
                    </View> 
                    <View className='patient'>
                        <Checkbox value='选中' checked className='selected'></Checkbox>
                        <Image 
                            className='head' 
                            src={app.imageUri+'img/head_img.png'}
                        >
                        </Image>
                        <View className='info'>
                            <View className='top'>
                                张黎
                                <Text className='more-info'>女 45岁</Text>
                                <Text className='more-info'>添加于2019-01-08</Text>
                            </View>
                            <View className='bottom'>
                                <AtTag className='tag left'>门诊</AtTag>
                                <AtTag className='tag'>白内障呀</AtTag>
                            </View>
                        </View>
                    </View>
                    <View className='patient'>
                        <Checkbox value='选中' checked className='selected'></Checkbox>
                        <Image 
                            className='head' 
                            src={app.imageUri+'img/head_img.png'}
                        >
                        </Image>
                        <View className='info'>
                            <View className='top'>
                                张黎
                                <Text className='more-info'>女 45岁</Text>
                                <Text className='more-info'>添加于2019-01-08</Text>
                            </View>
                            <View className='bottom'>
                                <AtTag className='tag left'>门诊</AtTag>
                                <AtTag className='tag'>白内障呀</AtTag>
                            </View>
                        </View>
                    </View>
                    <View className='patient'>
                        <Checkbox value='选中' checked className='selected'></Checkbox>
                        <Image 
                            className='head' 
                            src={app.imageUri+'img/head_img.png'}
                        >
                        </Image>
                        <View className='info'>
                            <View className='top'>
                                张黎
                                <Text className='more-info'>女 45岁</Text>
                                <Text className='more-info'>添加于2019-01-08</Text>
                            </View>
                            <View className='bottom'>
                                <AtTag className='tag left'>门诊</AtTag>
                                <AtTag className='tag'>白内障呀</AtTag>
                            </View>
                        </View>
                    </View>
                    <View className='patient'>
                        <Checkbox value='选中' checked className='selected'></Checkbox>
                        <Image 
                            className='head' 
                            src={app.imageUri+'img/head_img.png'}
                        >
                        </Image>
                        <View className='info'>
                            <View className='top'>
                                张黎
                                <Text className='more-info'>女 45岁</Text>
                                <Text className='more-info'>添加于2019-01-08</Text>
                            </View>
                            <View className='bottom'>
                                <AtTag className='tag left'>门诊</AtTag>
                                <AtTag className='tag'>白内障呀</AtTag>
                            </View>
                        </View>
                    </View>
                    <View className='patient'>
                        <Checkbox value='选中' checked className='selected'></Checkbox>
                        <Image 
                            className='head' 
                            src={app.imageUri+'img/head_img.png'}
                        >
                        </Image>
                        <View className='info'>
                            <View className='top'>
                                张黎
                                <Text className='more-info'>女 45岁</Text>
                                <Text className='more-info'>添加于2019-01-08</Text>
                            </View>
                            <View className='bottom'>
                                <AtTag className='tag left'>门诊</AtTag>
                                <AtTag className='tag'>白内障呀</AtTag>
                            </View>
                        </View>
                    </View>
                </View>
                {/* <AtCheckbox 
                options={
                    this.state.patients.items.map((item)=>{
                        return {
                            label:item.members_id_from_doctor_id_name+' '+item.source+' 白内障',
                            value:item.id,
                            desc:'男 12岁 添加于'+item.created_at
                        };
                    })
                }
                selectedList={this.state.checkedList}
                onChange={this.handleChange.bind(this,'checkedList')}
                >
                </AtCheckbox> */}
                <View className=' class_8'>
                    <View className=' class_9'>
                        <View className=' class_10' onClick={this.checkAll.bind(this)}>
                            <Image className=' class_11' src={app.imageUri+'img/icon-dianzan-kong.png'}></Image>
                            <Text className=' class_12'>全选</Text>
                        </View>
                        <AtButton className=' class_13' onClick={this.next}>
                            <Text className=' class_14'>下一步（已选{this.state.checkedList.length}人）</Text>
                        </AtButton>
                    </View>
                </View>
            </View>
        );
    }
}
reactMixin.onClass(Xuanzeshouxinren, myJs);